---
title: الثيم المخصص
description: إنشاء ثيم مخصص
---

# الثيم المخصص

## إنشاء ثيم مخصص

> ملاحظة: هذه الواجهة البرمجية غير مستقرة ومن المحتمل أن تتغير في المستقبل القريب. نوصي بالالتزام بـ[الثيمات المدمجة](/docs/theming) في الوقت الحالي.

بينما توفر الثيمات المدمجة مستوى معينًا من التخصيص، يتم توفير نوع `Theme` لمساعدتك في تعريف الثيمات المخصصة الخاصة بك مع الوصول لمتغيرات الثيم الأساسية.

```tsx
import { RainbowKitProvider, Theme } from '@rainbow-me/rainbowkit';

const myCustomTheme: Theme = {
  blurs: {
    modalOverlay: '...',
  },
  colors: {
    accentColor: '...',
    accentColorForeground: '...',
    actionButtonBorder: '...',
    actionButtonBorderMobile: '...',
    actionButtonSecondaryBackground: '...',
    closeButton: '...',
    closeButtonBackground: '...',
    connectButtonBackground: '...',
    connectButtonBackgroundError: '...',
    connectButtonInnerBackground: '...',
    connectButtonText: '...',
    connectButtonTextError: '...',
    connectionIndicator: '...',
    downloadBottomCardBackground: '...',
    downloadTopCardBackground: '...',
    error: '...',
    generalBorder: '...',
    generalBorderDim: '...',
    menuItemBackground: '...',
    modalBackdrop: '...',
    modalBackground: '...',
    modalBorder: '...',
    modalText: '...',
    modalTextDim: '...',
    modalTextSecondary: '...',
    profileAction: '...',
    profileActionHover: '...',
    profileForeground: '...',
    selectedOptionBorder: '...',
    standby: '...',
  },
  fonts: {
    body: '...',
  },
  radii: {
    actionButton: '...',
    connectButton: '...',
    menuButton: '...',
    modal: '...',
    modalMobile: '...',
  },
  shadows: {
    connectButton: '...',
    dialog: '...',
    profileDetailsAction: '...',
    selectedOption: '...',
    selectedWallet: '...',
    walletLogo: '...',
  },
};

const App = () => (
  <RainbowKitProvider theme={myCustomTheme} {...etc}>
    {/* Your App */}
  </RainbowKitProvider>;
)
```

### توسيع الثيم المدمج

يمكنك توسيع الثيم المدمج بدون الحاجة إلى إعادة تعريف الثيم بالكامل. هذا مفيد عندما ترغب فقط في تجاوز بعض رموز الثيم المحددة.

للقيام بذلك، قم بتثبيت `lodash.merge` (أو ما يعادله):

```bash
npm install lodash.merge
```

قم باستيراده، بالإضافة إلى الثيم الذي تريد توسيعه (مثل: `darkTheme`) ونوع `Theme` الخاص بـTypeScript:

```tsx
import merge from 'lodash.merge';
import {
  RainbowKitProvider,
  darkTheme,
  Theme,
} from '@rainbow-me/rainbowkit';
```

بعد ذلك، قم بدمج الثيم المدمج مع الرموز التي ترغب في تجاوزها. في هذا المثال، قمت بتجاوز رمز `accentColor` ليتناسب مع لون العلامة التجارية الخاصة بي.

```tsx
const myTheme = merge(darkTheme(), {
  colors: {
    accentColor: '#07296d',
  },
} as Theme);
```

أخيراً، يمكنك الآن تمرير الثيم المخصص إلى prop الثيم الخاص بـ`RainbowKitProvider`.

```tsx
const App = () => {
  return (
    <RainbowKitProvider theme={myTheme} {...etc}>
      {/* Your App */}
    </RainbowKitProvider>
  );
};
```

### إنشاء محددات الثيم المخصصة

إذا كان التطبيق الخاص بك يتم تقديمه من الخادم أو إحصائيًا ويسمح للمستخدمين بالتبديل يدويًا بين الثيمات، يمكن ربط نظام الثيمات الخاص بـRainbowKit بمحددات CSS مخصصة مع الوظائف التالية التي يمكن استخدامها مع أي نظام CSS-in-JS:

- `cssStringFromTheme`
- `cssObjectFromTheme`

تقوم هذه الوظائف بإرجاع CSS يحدد جميع متغيرات الثيم المطلوبة. نظرًا لأن كلاً من السلاسل النصية والكائنات مدعومة، يمكن دمجها مع أي نظام CSS-in-JS.

كمثال بسيط، يمكنك عرض عنصر `style` الخاص بك بمحددات مخصصة لكل ثيم. بما أننا نتحكم في عرض CSS الخاص بالثيم، فإننا نمرر `null` إلى prop الثيم بحيث لا يقوم `RainbowKitProvider` بعرض أي أنماط نيابة عنا. لاحظ أيضًا استخدام خيار "يمتد" في دالة cssStringFromTheme التي تحذف أي متغيرات ثيم تتطابق مع الثيم الأساسي.

```tsx
import {
  RainbowKitProvider,
  cssStringFromTheme,
  lightTheme,
  darkTheme,
} from '@rainbow-me/rainbowkit';

const App = () => {
  return (
    <RainbowKitProvider theme={null} {...etc}>
      <style
        dangerouslySetInnerHTML={{
          __html: `
            :root {
              ${cssStringFromTheme(lightTheme)}
            }

            html[data-dark] {
              ${cssStringFromTheme(darkTheme, {
                extends: lightTheme,
              })}
            }
          `,
        }}
      />

      {/* ... */}
    </RainbowKitProvider>
  );
};
```
